<template>
   <div class="sidebar">
    <el-header style="background-color: rgb(0,175,240);height:48px;padding:0;">
    <el-col :span="4" push="1" style="background-color:rgb(4,166,226)">
        <img src="../../assets/images/u15209.png" alt="" style="margin-top:5px;margin-left:20px;">
        <span class="SBtitle">
            工地中心
        </span>
    </el-col>
    </el-header>
    <el-container>
    <el-aside width="21%">
    <el-col :span="19" push="5">
        <div style="height:20px;width:100%;"></div>
        <div style="height:10px;width:100%;background-color:#00aff0"></div>
        <el-menu
        default-active="2"
        background-color="#fafafa"
        text-color="rgb(51,51,51)">
            <el-menu-item-group>
            <template slot="title">
                <div class="groupT">
                    - 基本资料
                </div>
            </template>
            <el-menu-item index="1-1" @click='changeMain("personal")'><div class="groupC">个人资料</div></el-menu-item>
            <el-menu-item index="1-2" @click='changeMain("MySite")'><div class="groupC">我的工地</div></el-menu-item><!-- 改“profile1” -->
            </el-menu-item-group>
            <el-menu-item-group>
                <template slot="title">
                    <div class="groupT">- 交易管理</div>
                </template>
                <el-menu-item index="1-1" @click='changeMain("MyOrders")'><div class="groupC">我的订单</div></el-menu-item>
                <el-menu-item index="1-2" @click='changeMain("ListDetail")'><div class="groupC">我的合同</div></el-menu-item>
                <el-menu-item index="1-2" @click='changeMain("PoudListBar")'><div class="groupC">我的磅单</div></el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
                <template slot="title">
                    <div class="groupT">- 账号安全</div>
                </template>
                <el-menu-item index="1-1" @click='changeMain("Code")'><div class="groupC">登陆密码</div></el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
                <template slot="title">
                    <div class="groupT">- 财务管理</div>
                </template>
                <el-menu-item index="1-1">
                    <div class="groupC">账户余额</div></el-menu-item>
                <el-menu-item index="1-2"><div class="groupC">账单管理</div></el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
                <template slot="title">
                    <div class="groupT">- 增值服务</div>
                </template>
                <el-menu-item index="1-1">
                    <div class="groupC">技术支持</div></el-menu-item>
                <el-menu-item index="1-2"><div class="groupC">我的积分</div></el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
                <template slot="title">
                    <div class="groupT">- 系统管理</div>
                </template>
                <el-menu-item index="1-1">
                    <div class="groupC">人员管理</div></el-menu-item>
                <el-menu-item index="1-2" @click='changeMain("")'><div class="groupC">我的消息</div></el-menu-item>
            </el-menu-item-group>
        </el-menu>
    </el-col>
    </el-aside>
    <div class="main">
      <el-tabs type="border-card">
      <el-tab-pane>
        <span slot="label" class="labelcolor">订单信息</span>
        <div class="statustop">
          <el-col :span="1">
            <img src="../../assets/images/u1856.png" alt="" style="margin-top:20px;width:50px;height:50px;">
          </el-col>
          <el-col :span="4">
            <p>{{detail.status}}</p>
            <p v-if="detail.status=='待付款'">剩余{{timeremain}}自动取消订单</p>
          </el-col>
          <el-col :span="6">
            <el-progress :percentage="percentage" :color="customColor" :stroke-width="50" :text-inside="true" style="margin-top:20px;"></el-progress>
          </el-col>
        </div>
        <div class="statusmain">
        <div  style="width:100%;height:44px;position:relative;margin-bottom:20px;">
          <div style="display:inline-block;width:10px;height:44px;background-color:#00aff0"></div>
          <span style="display:inline-block;color:#00aff0;line-height:30px;position:absolute;top:10px;left:15px;">收货信息</span>
        </div>
        <el-radio-group v-model="radio">
          <el-radio :label="item.id" :key="item" v-for="item in detail.user">{{item.site+"       "+item.name+"       "+item.phone}}</el-radio>
        </el-radio-group>
        </div>
        <div class="statusfoot">
        <div  style="width:100%;height:44px;position:relative;margin-top:20px;">
          <div style="display:inline-block;width:10px;height:44px;background-color:#00aff0"></div>
          <span style="display:inline-block;color:#00aff0;line-height:30px;position:absolute;top:10px;left:15px;">货物详情</span>
        </div>
        <el-table
          :data="detail.goods"
          style="width: 100%">
          <el-table-column
            prop="goodname"
            label="货物名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="goodtype"
            label="型号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="price"
            label="单价">
          </el-table-column>
          <el-table-column
            prop="num"
            label="数量">
          </el-table-column>
        </el-table>
        </div>
        <p style="color:rgb(228,228,228)">最晚送达时间{{detail.time}}</p>
        <el-divider></el-divider>
        <div style="float:right;">
          <p>已选{{detail.goods.length}}种货物,{{"总商品金额：    ￥"+sumprice}}</p>
          <p>运费{{"：    ￥80.00"}}</p>
          <p>合计:{{"：    ￥"+(sumprice+80)}}</p>
          <div v-if="detail.status=='待付款'">
            <el-button>付款</el-button>
            <el-button>取消订单</el-button>
          </div>
          <div v-if="detail.status=='运输中'">
            <el-button>确认收货</el-button>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label" class="labelcolor">付款信息</span>
        <el-col :span="4">
          <h1>收款单位</h1>
          <h1>开户银行</h1>
          <h1>银行账号</h1>
          <h1>付款账号</h1>
          <h1>支付金额</h1>
          <h1 style="margin-bottom:50px;">付款凭证</h1>
          <h1>付款时间</h1>
        </el-col>
        <el-col :span="8">
          <p style="margin:28px 0px">杭州联晶网络科技有限公司</p>
          <p style="margin:28px 0px">中国建设银行杭州文晖支行</p>
          <p style="margin:28px 0px">56454456456456456</p>
          <p style="margin:28px 0px">56454456456456456</p>
          <p style="margin:28px 0px">¥500.00</p>
          <img src="../../assets/images/u16105.png" alt="" style="height:60px;width:161px;">
          <p style="margin:28px 0px">2019-02-16  15:00:00</p>
        </el-col>
        <el-col :span="4">
          <h1>支付方式</h1>
          <h1>支付金额</h1>
          <h1 v-if="detail.type=='单次'">收款账号</h1>
          <h1 v-if="detail.type=='单次'">付款账号</h1>
          <h1>付款时间</h1>
        </el-col>
        <el-col :span="8">
          <p style="margin:29px 0px">{{detail.type=='单次'?"支付宝/微信":"预付款/月结"}}</p>
          <p style="margin:29px 0px">{{detail.type=='单次'?"￥5000.00":"￥500"}}</p>
          <p style="margin:29px 0px" v-if="detail.type=='单次'">lianjingmaster@63.com</p>
          <p style="margin:29px 0px" v-if="detail.type=='单次'">13616505447</p>
          <p style="margin:29px 0px">{{detail.time}}</p>
        </el-col>
      </el-tab-pane>
    </el-tabs>
    </div>
    </el-container>
   </div>
</template>
<script>
export default {
    name: 'profile',
    data() {
        return{
            radio:1,
            sumprice:3200.00,
            percentage:0,
            customColor:"#00aff0",
            timeremain:"1小时",
            detail:{
              status:"待付款",
              type:"单次",
              time:"2019-02-16  15:00:00",
              user:[{
                id:1,
                site:"浙江省杭州市西湖区联合大厦B座",
                name:"张伟",
                phone:"19527250382"
              }],
              goods:[{
                goodname:"预拌抹灰砂浆",
                goodtype:"DPM16",
                price:6200,
                num:10
              },{
                goodname:"防冻剂",
                goodtype:"DPM16",
                price:6200,
                num:10
              }]
            }
        }
    },
    created(){
      alert("!!!")
        var a=location.search
        alert(a)
        alert(myDate.toLocaleString())
    },
    methods:{
        changeMain:function(obj){//点击导航栏
            window.location.href="/profile"
        }
    }
}
</script>
<style>
.statustop{
  position: relative;
  height: 100px;
  width: 100%;
}
.groupT{
    height: 30px;
    width: 100%;
    background-color: #f5f7fa;
    color: #333333;
    font-size: 20px;
    font-weight: 700;
    font-style: normal;
    line-height: 30px;
}
.el-menu-item{
    padding: 0 ! important;
}
.groupC{
    height: 56px;
    width: 100%;
    background-color: white;
    color: #00aff0;
    font-family: 'Arial Normal', 'Arial';
    font-weight: 400;
    font-style: normal;
    font-size: 13px;
    padding-left: 25px;
    line-height: 56px;
}
.SBtitle{
    color: white;
    font-size: 20px;
}
.main{
    height:200px;
    width: 100%;
    padding: 20px 8px 0 20px;
    box-sizing: border-box;
}
.labelcolor{
  /* color: #909399; */
  font-size: 16px;
  height: 50px;
  line-height: 50px;
  display: inline-block;
}
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active{
  color: #00aff0 !important;
}
.el-tabs__item{
    height: 50px;
}
</style>